<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Request from '@/api/axios'
import MarkdownEditor from '@/components/Markdown/MarkdownEditor.vue'
import { message } from 'ant-design-vue'
import { HttpStatusCode } from 'axios'
import { safeJsonParse } from '@/utils/safeJson'
import TagGroup from '@/components/TagGroup.vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import type { Blog } from './type'
const userStore = useUserStore()

const { id } = storeToRefs(userStore)
const route = useRoute()
const router = useRouter()
const blog = reactive<Blog>({
    id : '',
    user_id : "",
    title: '',
    created_at: '',
    updated_at: '',
    username: '',
    context: '',
    collection: 0,
    like: 0,
    is_private: false,
    tags: [],
})

onMounted(async () => {
    await Request.get({
        url: `/blog/${route.params.id}`
    }).then((response) => {
        if (response.info.user_id !== id.value) {
            message.error('你没有权限修改此文章')
            router.push({ name: "401" })
            return
        }
        blog.user_id = response.info.user_id
        blog.created_at = response.info.created_at
        blog.updated_at = response.info.updated_at
        blog.username = response.info.username
        blog.title = response.info.title
        blog.context = response.info.context
        blog.is_private = response.info.is_private
        blog.tags = safeJsonParse(response.info.tags).value
    })
})
const handleChange = async () => {
    await Request.post({
        url: `/blog/change`,
        data: {
            id: `${route.params.id}`,
            title: blog.title,
            context: blog.context,
            is_private: blog.is_private,
            tags: JSON.stringify(blog.tags),
        }
    })
        .then((response) => {
            if (response.code == HttpStatusCode.Ok) {
                message.success('修改成功')
            } else {
                message.error('修改失败')
                console.log(response.msg)
            }
        })
        .catch((err) => {
            message.error('修改失败')
            console.log(err)
        })
        .finally(() => { })
}
//TODO
</script>

<template>
    <a-row :gutter="16">
        <a-col :span="18"><a-input :placeholder="'请输入标题'" style="border-radius: 40px;height: 35px;"
                v-model:value="blog.title" /></a-col>
        <a-col :span="6">
            <a-button type="primary"
                style="font-weight: bold;font-size: 16px;border-radius: 2.1875rem;width: 8.125rem;height: 2.235rem;"
                @click="handleChange">修改</a-button>
            <a-button
                style="font-weight: bold;font-size: 16px;border-radius: 2.1875rem;width: 8.125rem;height: 2.235rem;"
                @click="$router.go(-1)">取消</a-button>
        </a-col>
    </a-row>
    <a-row :gutter="16" style="margin-top: 0.625rem;">
        <a-col :span="12">
            <TagGroup :tags="blog.tags" />
        </a-col>
    </a-row>
    <a-switch v-model:checked="blog.is_private" checked-children="私有" un-checked-children="公开" />
    <MarkdownEditor v-model="blog.context" mode="edit" style="width: 62.5rem" height="600px" />
</template>

<style scoped></style>
